<template>
	<view class="open_mh_view">
		<view class="open_mh_mask" @click="closeOpenView"></view>
		<view class="kj_jp_view">
			<view class="kj_jp_title">
				<image src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/e6d7ce8e03a49aa8e09e31096cd7a5fe.png" style="width:200px; height:90px;" class="back-img" mode="aspectFit"></image>
			</view>
			<view class="kj_jp_list">
				<view class="kj_jp_order">
					<view class="kj_order_info">
						<image
							v-if="order_result.win == 'side_left'"
							title="赢"
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/e2abcb1b0409ea620d9376f68b922f76.png"  
							class="pk_result pk_result_left" mode="aspectFit"></image>
						<image
							v-else
							title="输"
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/87e05926569d3b1cdf25ab300aa03b39.png"  
							class="pk_result pk_result_left" mode="aspectFit"></image>
						
						<image
							v-if="order_result.win == 'side_right'"
							title="赢"
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/e2abcb1b0409ea620d9376f68b922f76.png"  
							class="pk_result pk_result_right" mode="aspectFit"></image>
						<image
							v-else
							title="输"
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/87e05926569d3b1cdf25ab300aa03b39.png"  
							class="pk_result pk_result_right" mode="aspectFit"></image>	
						<image
							src="https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/7e369c19b31ef481835a83e1c88eaad1.png"  
							class="mask-img" mode="aspectFit"></image>
						<view class="pk_left_member">
							<image
									:src="order_result.member_left.user_img"  
									class="u-img" mode="aspectFit"></image>
								{{order_result.member_left.nickname}}
						</view>
						<view class="pk_right_member">
							{{order_result.member_right.nickname}}
							<image
									:src="order_result.member_right.user_img"  
									class="u-img" mode="aspectFit"></image>
						</view>
					</view>
					<view class="pk_create">
						<view class="arrow_right"></view>
						<view class="pk_create_text">开奖时间：{{$u.timeFormat(order_result.win_time, 'yyyy-mm-dd hh:MM:ss')}}</view>
						<view class="arrow_left"></view>
					</view>
					<view class="pk_num">
						<view class="arrow_right"></view>
						<view class="pk_create_text">数量：{{order_result.num}}个</view>
						<view class="arrow_left"></view>
					</view>
					<view class="kj_list_view">
						<scroll-view style="max-height: 300rpx;" scroll-y="true" class="scroll-Y">				
							<view v-for="n in order_result.num" :key="$u.guid()" class="zj_list">
								<!-- {{order_result.side_left[n-1]['goods_data']}} -->
								<view class="side_left">
									<image :src="order_result.side_left[n]['goods_image']"></image>
									<view class="goods_title">
										{{order_result.side_left[n]['goods_title_text']}}
									</view>	
								</view>
								<view class="side_right">
									<image :src="order_result.side_right[n]['goods_image']"></image>
									<view class="goods_title">
										{{order_result.side_right[n]['goods_title_text']}}
									</view>	
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="kj_jp_btn">
				<view class="btn_li" @click="goToCangku()">前往仓库</view>
				<view class="btn_li" @click="closeOpenView">再来一次</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name:'MhOpen',
		props : {
			order_result: {
				type: Object
			},
		},
		data() {
			return {
				data: ''
			}
		},
		methods : {
			goToCangku(){
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				});
			},
			closeOpenView(){
				this.$emit("closeOpenView");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.open_mh_view{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		display: flex;
		justify-content: center;
		align-items: center;
		.kj_jp_btn{
			display: flex;
			justify-content: space-around;
			margin-top:36rpx;
			.btn_li{
				width: 240rpx;
				height:84rpx;
				text-align: center;
				line-height: 84rpx;
				color:#fff;
				font-size: 13px;
				background:url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240921/18598a895b48804e4020da94d60616be.png") no-repeat center center;
			}
		}
		
		.open_mh_mask{
			position: absolute;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			z-index: 10;
		}
		.kj_jp_view{
			position: relative;
			width: 90%;
			z-index: 30;
			.kj_jp_title{ 
				text-align:center; 
				widht:400rpx;
				height:180rpx;
				position: absolute;
				left:50%;
				top:-50rpx;
				margin-left:-200rpx;
			}
			.kj_jp_list{
				padding-top:90rpx;
				min-height:450rpx;
				background:#fff;
				border:26rpx solid #ecc6fd;
				border-radius:40rpx;
				.kj_jp_order{
					padding:10rpx;
					.mask-img{ width: 100%; height: 80px; }
					.kj_order_info{
						position: relative;
						.pk_result{
							position: absolute;
							width: 80rpx; height:80rpx; top:-25rpx;
							z-index: 100;
						}
						.pk_result_left{
							left:15%
						}
						.pk_result_right{
							right:15%
						}
						.u-img{
							position: absolute;
							width: 80rpx; height:80rpx;
							left: 0;
							border-radius: 8rpx;
						}
						.pk_left_member,.pk_right_member{
							position: absolute;
							top: 36rpx;
							left: 28rpx;
							width: 33%;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							height:80rpx;
							line-height: 80rpx;
							padding-left:85rpx;
							color:#fff;
							.pk_result{
								position: absolute;
								width: 80rpx;
							}
						}
						.pk_right_member{
							right:28rpx;
							left:unset;
							padding-left:unset;
							padding-right:85rpx;
							.u-img{
								position: absolute;
								width: 80rpx; height:80rpx;
								left:unset; right: 0;
								border-radius: 8rpx;
							}
						}
					}
					.pk_create,.pk_num{ line-height: 50rpx; text-align: center; color:#333; }
					.kj_list_view{
						.zj_list{
							display: flex;
							justify-content: space-between;
							.side_left,.side_right{
								width: 48%;
								display: flex;
								border:1px solid #ddd;
								margin:5rpx 0;
								padding:15rpx;
								border-radius: 10rpx;
								color:#333;
								image{ width:80rpx; height:80rpx; flex-shrink: 0; }
								.goods_title{ color:#333; margin-left:10rpx;
									display: -webkit-box;
									  -webkit-box-orient: vertical;
									  -webkit-line-clamp: 2;
									  overflow: hidden;
									  text-overflow: ellipsis;
								 }
							}
						}
					}
				}
			}
		}
	}
</style>